<template>
  <div class="fast-box">
    <div class="fast-prompt">{{ tip.fastPrompt }}</div>
    <div class="way-box">
      <div
        v-for="wayItem in wayList"
        :key="wayItem.code"
        class="way-item"
        :style="{ width: wayList.length <= 4 ? '25%' : '33%' }"
      >
        <div class="way-icon">
          <i :class="wayItem.icon" :style="{ color: wayItem.color }"></i>
        </div>
        <div class="way-label">{{ wayItem.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, ref, onMounted } from 'vue';
  import VueEvent from '@/helper/event';
  import { useI18n } from '@common/locales';
  import { USER_LOGIN_FAST, EVENT_METHOD } from '@/helper/constant';
  export default defineComponent({
    name: 'LoginFast',
    setup() {
      const t = useI18n().t;
      const wayList = ref([]);
      const state = {
        tip: {
          fastPrompt: t('fastLogin.textTip'),
        },
      };

      const methods = {
        filterFast(data) {
          let loginStr = data.JE_SYS_FASTLOGIN;
          wayList.value = [];
          if (loginStr) {
            let fastLogins = loginStr.split(',');
            for (let fastKey of fastLogins) {
              for (let userItem of USER_LOGIN_FAST) {
                if (userItem.code === fastKey) {
                  wayList.value.push(userItem);
                }
              }
            }
          }
        },
      };
      onMounted(() => {
        VueEvent.on(EVENT_METHOD.LOGIN_METHOD, methods.filterFast);
      });

      return {
        wayList,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .fast-box {
    width: 100%;
    height: 264px;
  }
  .fast-prompt {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #3f3f3f;
  }
  .way-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 60px;
    .way-item {
      width: 18%;
      margin-bottom: 20px;
      .way-icon {
        width: 40px;
        margin: 0 auto;
        i {
          font-size: 40px;
          // color: #d9d9d9;
          cursor: pointer;
        }
      }
      .way-label {
        width: 100;
        text-align: center;
      }
    }
  }
</style>
